<template>
  <div>
    <button @click="loadData" :disabled="isLoading">
      {{ isLoading ? 'Processing...' : 'Load Data' }}
    </button>

    <div v-if="error" class="error">{{ error.message }}</div>

    <div v-if="processedData.length">
      <VirtualList :items="processedData" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useDataProcessor } from '../utils/workerUtil'
import VirtualList from './VirtualList.vue'

const { processedData, isLoading, error, processData } = useDataProcessor()

// 模拟获取大量数据
const loadData = () => {
  const mockData = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Item ${i}`,
    value: Math.random()
  }))
  console.log('大量数据：', mockData)
  processData(mockData)
}
</script>
